<template>
	<div class="container">
		<el-card class="box-card">
			<div slot="header" class="clearfix author-header">
				<span>角色列表</span>
				<el-button size="mini" type="primary" icon="el-icon-circle-plus-outline" plain
					@click='addDialogVisible = true'>添加角色</el-button>
			</div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="id" label="#">
				</el-table-column>
				<el-table-column label="角色" prop="name">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" plain>{{ scope.row.name }}</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" icon="el-icon-edit" :disabled="scope.row.id == 1" plain
							@click='openEditDialog(scope.row)'>
						</el-button>
						<el-button style="margin-right: 10px;" size="mini" type="danger" icon="el-icon-delete" :disabled="scope.row.id == 1"
							@click='handleRemove(scope.row.id,scope.$index)' plain>

						</el-button>
						<router-link :to="{name:'AuthRoleConfig',params:{id:scope.row.id}}">
							<el-button size="mini" type="primary" icon="el-icon-setting"
								@click='loadConfig(scope.row.id)' plain>

							</el-button>
						</router-link>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<div class="config-box">
			<el-card class="config-card" v-for="(item,index) in configData">
				<div slot="header" class="clearfix config-header">
					<span class="el-icon-collection-tag">{{item.name}}</span>
					<el-switch v-model="item.checked" @change="handleCheckAll"></el-switch>
				</div>
				<div v-for="(it,ind) in item.children">
					<div class="config-content">
						<span>{{it.name}}</span>
						<el-switch v-model="it.checked" @change="handleCheckOne(item,it)"></el-switch>
					</div>
				</div>
			</el-card>
		</div>
		<!-- 添加角色 -->
		<el-dialog title="添加角色" :visible.sync="addDialogVisible" @close='handleDialogClose("addForm")'>
			<el-form :model="addForm" label-width="80px" ref="addForm" :rules='rules'>
				<el-form-item label="角色名称" prop='name'>
					<el-input v-model="addForm.name"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer">
				<el-button @click="addDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleAdd">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 编辑角色 -->
		<el-dialog title="编辑角色" :visible.sync="editDialogVisible" @close='handleDialogClose("editForm")'>
			<el-form :model="editForm" label-width="80px" ref="editForm" :rules='rules'>
				<el-form-item label="角色名称" prop='name'>
					<el-input v-model="editForm.name"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer">
				<el-button @click="editDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleEdit">确 定</el-button>
			</div>
		</el-dialog>
	</div>

</template>

<script>
	import { Auth } from '@/api/';

	export default {
		props: ["id"],
		data() {
			return {
				addForm: {
					name: '',
				},
				editForm: {
					id: '',
					name: '',
				},
				tableData: [],
				configData: [],
				addDialogVisible: false,
				editDialogVisible: false,
				rules: {
					name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
				},
				current: -1,
			};

		},

		async mounted() {
			await this.loadConfig(this.$route.params.id)
		},
		created() {
			this.loadList();

		},
		methods: {
			async loadList() {
				let { status, data } = await Auth.list();
				if (status) {
					this.tableData = data;
				}
			},

			async loadConfig(id) {
				let { status, data } = await Auth.config({ id });
				console.log(data)
				if (status) {
					this.configData = data
				}
			},
			handleAdd() {
				this.$refs.addForm.validate(async (valid) => {
					if (valid) {
						let { status, msg, data } = await Auth.insert({ ...this.addForm });
						if (status) {
							this.tableData.push({ ...data, ...this.addForm });
							this.addDialogVisible = false;
						}
					}

				})
			},
			handleEdit() {
				this.$refs.editForm.validate(async (valid) => {
					if (valid) {
						let { status, msg } = await Auth.update({ ...this.editForm });
						if (status) {
							this.$message.success('修改成功!');
							this.editDialogVisible = false;
							this.loadList();
						} else {
							this.$message.error('修改失败!');
						}
					}

				})
			},
			handleRemove(id, i) {
				this.$confirm('此操作将永久删除用户，是否继续', { type: 'warning' })
					.then(async () => {
						//ajax
						let { status, msg } = await Auth.remove(id);
						if (status) {
							// 跟新DOM
							this.tableData.splice(i, 1);
							this.$message.success('删除成功');
						}
					})
					.catch(() => {
						this.$message.info('取消成功')
					})
			},
			handleDialogClose(form) {
				this.$refs[form].clearValidate();
			},
			openEditDialog(role) {
				this.editForm = { ...role };
				this.editDialogVisible = true;
			},
			handleCheckAll() {
				this.configData.forEach(function(item, index) {
					if (item.checked) {
						item.children.forEach(function(it, ind) {
							it.checked = true
						})
					} else {
						item.children.forEach(function(it, ind) {
							it.checked = false
						})
					}
				})
			},
			handleCheckOne(item, it) {
				var flag = true;
				item.children.forEach(function(m, n) {
					if (!m.checked) {
						flag = false;
						return false;
					}
				});
				if (flag) {
					item.checked = true;
				} else {
					item.checked = false;
				}
			}
		}

	}
</script>

<style lang="less" scoped>
	.author-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.box-card {
		width: 560px;
	}

	.config-box {
		width: 660px;
	}

	.config-card {
		margin-bottom: 20px;
	}

	.container {
		display: flex;
		justify-content: space-between;
	}

	.config-header {
		display: flex;
		justify-content: space-between;
		color: #409eff;
		font-size: 14px;
	}

	.config-content {
		font-size: 12px;
		color: #909399;
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}
</style>
